<template>
	<view class="clerkManage-main">
		<view class="clerkManage-content" v-if="storeType == '1'">
			<!-- 店员概况 -->
			<view class="clerkManage-info">
				<view class="clerkManage-infoList">
					<view class="infoHeader">
						<uni-icons type="person-filled" size="24" color="#fff"></uni-icons>
						<text style="margin-left: 8rpx">店员概况</text>
					</view>

					<view class="infoList">
						<view class="infoItem">
							<view class="num" @click="gotoPath('/pages/storeSide/clerkExamine/clerkExamine?id=0')">
								<text style="margin-right: 8rpx">
									{{ storeInfo.staff_wait || '0' }}
								</text>
								<uni-icons type="right" size="14" color="#fff"></uni-icons>
							</view>
							<view class="title">待审核</view>
						</view>

						<view class="infoItem" @click="gotoPath('/pages/storeSide/ClerkList/ClerkList')">
							<view class="num">
								<text style="margin-right: 8rpx">
									{{ storeInfo.staff_pass || '0' }}
								</text>
								<uni-icons type="right" size="14" color="#fff"></uni-icons>
							</view>
							<view class="title">已通过</view>
						</view>

						<view class="infoItem">
							<view class="num" @click="gotoPath('/pages/storeSide/clerkExamine/clerkExamine?id=1')">
								<text style="margin-right: 8rpx">
									{{ storeInfo.staff_refuse || '0' }}
								</text>
								<uni-icons type="right" size="14" color="#fff"></uni-icons>
							</view>
							<view class="title">已拒绝</view>
						</view>
					</view>
				</view>
			</view>

			<view class="clerkManage-options">
				<!-- 操作店员 -->
				<view class="clerkManage-option">
					<view class="clerkManage-option-header">店员</view>
					<view class="option-item" @click="gotoPath('/pages/storeSide/clerkExamine/clerkExamine')">
						<view class="option-item-icon">
							<uni-icons type="person-filled" size="22"></uni-icons>
						</view>
						<view class="option-item-title">店员审核</view>
						<view class="option-item-icons">
							<uni-icons type="right" size="14"></uni-icons>
						</view>
					</view>

					<view class="option-item" @click="gotoPath('/pages/storeSide/ClerkList/ClerkList')">
						<view class="option-item-icon">
							<uni-icons type="person-filled" size="22"></uni-icons>
						</view>
						<view class="option-item-title">店员列表</view>
						<view class="option-item-icons">
							<uni-icons type="right" size="14"></uni-icons>
						</view>
					</view>

					<view class="option-item" style="border-bottom: none" @click="gotoPath('/pages/storeSide/inviteClerk/inviteClerk')">
						<view class="option-item-icon">
							<uni-icons type="person-filled" size="22"></uni-icons>
						</view>
						<view class="option-item-title">邀请店员</view>
						<view class="option-item-icons">
							<uni-icons type="right" size="14"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-else style="padding: 100px 0px;">
			<u-empty mode="permission" icon="http://cdn.uviewui.com/uview/empty/permission.png" text="云店暂未开通店员管理"></u-empty>
		</view>

		<!-- 底部导航栏 -->
		<view class="footerTabbar">
			<hwxcStoreTabbar />
		</view>
	</view>
</template>

<script>
import hwxcStoreTabbar from '../../../components/hwxcStoreTabbar/hwxcStoreTabbar.vue';
import { storeStaffOverview } from '../../../api/flashManage/index.js';
export default {
	data() {
		return {
			storeType: null,
			storeInfo: {}
		};
	},
	components: {
		hwxcStoreTabbar
	},
	onShow() {
		this.storeType = this.$store.state.storeType;
		if (this.storeType == 1) {
			this.getstoreStaffOverview();
		}
	},
	methods: {
		gotoPath(path) {
			uni.navigateTo({
				url: path
			});
		},
		async getstoreStaffOverview() {
			try {
				const resData = await storeStaffOverview({
					type: this.storeType
				});
				this.storeInfo = resData.data;
			} catch (e) {
				throw Error(e);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.clerkManage-main {
	.clerkManage-content {
		.clerkManage-info {
			background-color: #fff;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			.clerkManage-infoList {
				background-color: #2979ff;
				height: 280rpx;
				border-radius: 24rpx;
				box-sizing: border-box;
				padding: 20rpx 40rpx;
				font-size: 30rpx;
				.infoHeader {
					height: 80rpx;
					display: flex;
					align-items: center;
					color: #fff;
				}

				.infoList {
					display: flex;
					align-items: center;
					margin-top: 40rpx;
					.infoItem {
						flex: 1;
						text-align: center;
						color: #fff;
						.num {
							margin-bottom: 18rpx;
							font-size: 30rpx;
							font-weight: bold;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.title {
							font-size: 28rpx;
						}
					}
				}
			}
		}

		.clerkManage-options {
			box-sizing: border-box;
			padding: 30rpx;

			.clerkManage-option {
				background-color: #fff;
				border-radius: 24rpx;
				padding: 30rpx;
				padding-bottom: 0px;
				.clerkManage-option-header {
					margin-bottom: 20rpx;
					font-weight: bold;
				}
				.option-item {
					height: 100rpx;
					display: flex;
					align-items: center;
					border-bottom: 1px #f3f3f3 solid;
					font-size: 28rpx;
					.option-item-icon {
						width: 55rpx;
					}
					.option-item-title {
						flex: 1;
					}
					.option-item-icons {
						width: 50rpx;
						text-align: center;
					}
				}
			}
		}
	}
	.footerTabbar {
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 100%;
		z-index: 999;
	}
}
</style>
